import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    pageSize: 10,
    currentPage: 1,
    searchQuery: '',
    tableData: [
      {
        id: 0,
        date: '2026-05-02',
        name: '洗发露',
        address: '上海市普陀区金沙江路 1518 弄',
        price: '32',
        inventory: '1000'
      },
      {
        id: 1,
        date: '2026-05-02',
        name: '卸妆水',
        address: '上海市普陀区金沙江路 1517 弄',
        price: '28',
        inventory: '800'
      },
      {
        id: 2,
        date: '2025-05-01',
        name: '沐浴露',
        address: '上海市普陀区金沙江路 1519 弄',
        price: '25',
        inventory: '1200'
      },
      {
        id: 3,
        date: '2025-05-03',
        name: '洗发水',
        address: '上海市普陀区金沙江路 1516 弄',
        price: '35',
        inventory: '900'
      },
      {
        id: 4,
        date: '2026-05-04',
        name: '护发素',
        address: '北京市朝阳区光华路 123 号',
        price: '38',
        inventory: '700'
      },
      {
        id: 5,
        date: '2026-05-05',
        name: '身体乳',
        address: '北京市朝阳区建国路 456 号',
        price: '40',
        inventory: '850'
      },
      {
        id: 6,
        date: '2026-05-06',
        name: '面霜',
        address: '北京市海淀区中关村 789 号',
        price: '45',
        inventory: '600'
      },
      {
        id: 7,
        date: '2026-05-07',
        name: '口红',
        address: '上海市黄浦区南京西路 1010 号',
        price: '50',
        inventory: '500'
      },
      {
        id: 8,
        date: '2026-05-08',
        name: '眼霜',
        address: '上海市徐汇区淮海中路 1212 号',
        price: '48',
        inventory: '750'
      },
      {
        id: 9,
        date: '2026-05-09',
        name: '面膜',
        address: '广州市天河区珠江新城 1414 号',
        price: '55',
        inventory: '480'
      },
      {
        id: 10,
        date: '2026-05-10',
        name: '巧克力',
        address: '上海市黄浦区南京东路 888 号',
        price: '20',
        inventory: '1200'
      },
      {
        id: 11,
        date: '2026-05-11',
        name: '薯片',
        address: '北京市朝阳区三里屯 777 号',
        price: '12',
        inventory: '2000'
      },
      {
        id: 12,
        date: '2026-05-12',
        name: '咖啡豆',
        address: '广州市越秀区北京路 666 号',
        price: '40',
        inventory: '600'
      },  
    ],
    userData:[
      {
        "id": 0,
        "date": "2024-05-29",
        "name": "张小明",
        "address": "上海市浦东新区陆家嘴 1001 号"
      },
      {
        "id": 1,
        "date": "2024-05-28",
        "name": "李小红",
        "address": "上海市徐汇区淮海中路 888 号"
      },
      {
        "id": 2,
        "date": "2024-05-27",
        "name": "王小刚",
        "address": "上海市长宁区天山路 999 号"
      },
      {
        "id": 3,
        "date": "2024-05-26",
        "name": "赵小雨",
        "address": "上海市静安区南京西路 666 号"
      },
      {
        "id": 4,
        "date": "2024-05-25",
        "name": "孙小花",
        "address": "上海市黄浦区人民广场 777 号"
      },
      {
        "id": 5,
        "date": "2024-05-24",
        "name": "刘小明",
        "address": "上海市虹口区四川北路 666 号"
      },
      {
        "id": 6,
        "date": "2024-05-23",
        "name": "陈小红",
        "address": "上海市杨浦区长阳路 888 号"
      },
      {
        "id": 7,
        "date": "2024-05-22",
        "name": "周小刚",
        "address": "上海市宝山区淞南镇 999 号"
      },
      {
        "id": 8,
        "date": "2024-05-21",
        "name": "吴小雨",
        "address": "上海市闵行区七宝 666 号"
      },
      {
        "id": 9,
        "date": "2024-05-20",
        "name": "郑小花",
        "address": "上海市嘉定区嘉定镇 777 号"
      },
      {
        "id": 10,
        "date": "2024-05-19",
        "name": "马小明",
        "address": "上海市青浦区华新镇 666 号"
      },
      {
        "id": 11,
        "date": "2024-05-18",
        "name": "胡小红",
        "address": "上海市奉贤区南桥镇 888 号"
      },
      {
        "id": 12,
        "date": "2024-05-17",
        "name": "朱小刚",
        "address": "上海市金山区金山镇 999 号"
      },
      {
        "id": 13,
        "date": "2024-05-16",
        "name": "刘小雨",
        "address": "上海市松江区松江镇 666 号"
      },
      {
        "id": 14,
        "date": "2024-05-15",
        "name": "曹小花",
        "address": "上海市青浦区朱家角 777 号"
      },
    ],
  },
  mutations: {
    SET_PAGE_SIZE(state, pageSize) {
      state.pageSize = pageSize;
    },
    SET_CURRENT_PAGE(state, currentPage) {
      state.currentPage = currentPage;
    },
    SET_SEARCH_QUERY(state, searchQuery) {
      state.searchQuery = searchQuery;
    },
    ADD_ITEM(state, newItem) {
      state.tableData.push(newItem);
    },
    UPDATE_ITEM(state, updatedItem) {
      const index = state.tableData.findIndex(item => item.id === updatedItem.id);
      if (index !== -1) {
        Vue.set(state.tableData, index, updatedItem);
      }
    },
    DELETE_ITEM(state, id) {
      state.tableData = state.tableData.filter(item => item.id !== id);
    },
    ADD_USER(state, newUser) {
      newUser.id = state.userData.length ? Math.max(...state.userData.map(user => user.id)) + 1 : 1;
      state.userData.push(newUser);
    },
    UPDATE_USER(state, updatedUser) {
      const index = state.userData.findIndex(user => user.id === updatedUser.id);
      if (index !== -1) {
        Vue.set(state.userData, index, updatedUser);
      }
    },
    DELETE_USER(state, id) {
      state.userData = state.userData.filter(user => user.id !== id);
    },
  },
  actions: {
    addItem({ commit }, newItem) {
      commit('ADD_ITEM', newItem);
    },
    updateItem({ commit }, updatedItem) {
      commit('UPDATE_ITEM', updatedItem);
    },
    deleteItem({ commit }, id) {
      commit('DELETE_ITEM', id);
    },
    updateSearchQuery({ commit }, searchQuery) {
      commit('SET_SEARCH_QUERY', searchQuery);
    },
    addUser({ commit }, newUser) {
      commit('ADD_USER', newUser);
    },
    updateUser({ commit }, updatedUser) {
      commit('UPDATE_USER', updatedUser);
    },
    deleteUser({ commit }, id) {
      commit('DELETE_USER', id);
    }
  },
  getters: {
    filteredTableData: (state) => {
      return state.tableData.filter(item => item.name.includes(state.searchQuery));
    },
    paginatedTableData: (state, getters) => {
      const startIndex = (state.currentPage - 1) * state.pageSize;
      const endIndex = startIndex + state.pageSize;
      return getters.filteredTableData.slice(startIndex, endIndex);
    },
    filterUserData: (state) =>{
      return state.userData.filter(user =>user.name.includes(state.searchQuery));
    },
    paginatedUserData: (state,getters) =>{
      const startIndex=(state.currentPage -1) * state.pageSize;
      const endIndex = startIndex + state.pageSize;
      return getters.filterUserData.slice(startIndex, endIndex);
    }
  }
});
